<!--  -->
<template>
    <div>
        <van-nav-bar title="全部订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div>
            <div class="title"  v-for="item in productList" :key="item.id">
                <div class="category">
                    <p>天猫官方旗舰店&nbsp;</p>
                    <span>交易成功</span>
                </div>
                <van-swipe-cell>
                    <van-card  :price="item.price" :title="item.name" :num="item.num" :thumb="item.url"  />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
                <div class="more">
                    <router-link to="path"><span>更多</span></router-link>
                    <router-link to="path"><p>卖了换钱</p></router-link>
                    <router-link to="path"><p>追加评价</p></router-link>
                    <router-link to="/see"><p>查看物流</p></router-link>
                </div>

                <div class="hr"></div>
            </div>

        </div>

    </div>
</template>
<script setup lang='ts'>
import { useCart } from '@/hooks/cart';
const { productList} = useCart()


const onClickLeft = () => {
    history.back()
}

</script>
<style scoped lang="scss">
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.title {
    padding: 10px 16px;

    .category {
        display: flex;
        justify-content: space-between;


        p {
            font-size: 12px;
            margin: 0;
        }

        p:hover {
            color: #ee0a24;
        }

        span {
            color: #ff6d2c;
            font-size: 10px
        }

        ;
    }

    .hr {
        width: 100%;
        border: 1px solid #ccc;
    }
}

.more {
    display: flex;
    justify-content: space-between;

    span {
        font-size: 14px;
        margin-top: 24px;
        color: #ccc;
    }

    p {
        padding: 10px;
        font-size: 12px;
        border: 1px solid #e7e7e7;
        border-radius: 30px;
    }
}
</style>